<script setup lang='ts'>
const _props = defineProps<{
    errorData: {
        msg?: string
        nodeErrors?: any
        treeErrors?: any[]
    }
}>()
const visible = defineModel<boolean>('visible', { required: true })

const dialogTitle = '发布失败'

// #region UI Listener
function cancel() {
    visible.value = false
}

function closed() {

}
// #endregion
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialogTitle"
                close-on-press-escape
                :has-footer="false"
                @cancel="cancel"
                @closed="closed"
    >
        <div class="max-h-[640px] min-h-[84px] overflow-y-auto">
            <div v-if="errorData?.msg"
                 class="font-semibold leading-[28px]"
            >
                {{ errorData?.msg }}
            </div>

            <div v-if="errorData?.treeErrors?.length"
                 class="font-semibold leading-[28px]"
            >
                组价节点树中:
            </div>

            <div v-for="item in (errorData?.treeErrors || [])"
                 :key="item"
                 class="leading-[28px]"
            >
                {{ item }}
            </div>

            <div v-for="key in Object.keys(errorData?.nodeErrors || {})"
                 :key="key"
            >
                <div class="font-semibold leading-[28px]">
                    {{ key }}:
                </div>

                <ul>
                    <li v-for="item in errorData?.nodeErrors[key]"
                        :key="item"
                        class="leading-[28px] whitespace-pre"
                    >
                        {{ `    ${item}` }}
                    </li>
                </ul>
            </div>
        </div>
    </PlusDialog>
</template>
